<script setup>
import {ref} from "vue";
import {forgetPasswordAPI, getPhoneCode} from "../services/login";

const codeText = ref('获取验证码')
const myCode = ref()
const userCode = ref()
const userPhone = ref('')
const password = ref('')
const rePassword = ref('')

const getCode = async () => {
  if (userPhone.value.length !== 11) {
    await uni.showToast({title: "请输入手机号", icon: "none"})
    return
  }
  if (myCode.value.canGetCode) {
    await getPhoneCode(userPhone.value)
    myCode.value.start()
  } else {
    this.$u.toast('倒计时结束后再发送')
  }
}
const codeChange = (text) => {
  codeText.value = text
}

const handleChangeNickname = async () => {
  if (userPhone.value.length !== 11) {
    await uni.showToast({title: "请设输入手机号", icon: "none"})
    return
  }
  if (!password.value) {
    await uni.showToast({title: "请输入密码", icon: "none"})
    return
  }
  if (!rePassword.value) {
    await uni.showToast({title: "请输入密码", icon: "none"})
    return
  }
  if (rePassword.value !== password.value) {
    await uni.showToast({title: "两次密码输入不一致", icon: "none"})
    return
  }
  if (!userCode.value) {
    await uni.showToast({title: "请输入验证码", icon: "none"})
    return
  }
  await forgetPasswordAPI(userPhone.value, userCode.value, password.value, rePassword.value)
  await uni.showToast({
    title: "重置密码成功",
    icon: 'none'
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 2000)
}
</script>

<template>
  <u-navbar
      title="重置密码"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      auto-back
  >
  </u-navbar>
  <view class="container">
    <view class="phone-c">
      <text class="phone-title">手机号</text>
      <input type="number" class="weui-input" v-model="userPhone" placeholder="请输入手机号"/>
    </view>
    <view class="phone-c">
      <text class="phone-title">设置密码</text>
      <input type="password" class="weui-input" v-model="password" placeholder="请输入新密码"/>
    </view>
    <view class="nickname-c">
      <text class="nickname-title">再次输入</text>
      <input type="password" class="weui-input" v-model="rePassword" placeholder="请再次输入新密码"/>
    </view>
    <view class="code-c">
      <text class="code-title">验证码</text>
      <input type="number" class="weui-input" v-model="userCode" placeholder="请输入验证码"/>
      <view class="code-brn" @click="getCode">{{ codeText }}</view>
      <u-code ref="myCode" @change="codeChange"></u-code>
    </view>
    <view class="save">
      <button class="save-btn" @click="handleChangeNickname">
        <text>保存设置</text>
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  padding: 0 50rpx 50rpx;
}

.avatar-wrapper {
  padding: 0;
  margin-top: 50rpx;
}

.avatar {
  width: 168rpx;
  height: 168rpx;
  border-radius: 16rpx;
}

.nickname-c, .phone-c, .code-c {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 50rpx 0 0;
}

.nickname-c {
  margin-top: 50rpx;
}

.nickname-title, .phone-title, .code-title {
  font-size: 28rpx;
  padding: 0 20rpx;
  width: 128rpx;
}

.code-brn {
  width: 180rpx;
  color: #007AFF;
  padding: 10rpx 4rpx;
  text-align: center;
  font-size: 32rpx;
}

.weui-input {
  flex: 1;
  background-color: #f8f8f8;
  padding: 16rpx 20rpx;
}

.save-btn {
  margin-top: 68rpx;
  width: 650rpx;
  color: #fff;
  border-radius: 50rpx;
  background: linear-gradient(90deg, #fc605b, #fb9360);
}

.code-btn {
  margin-top: 50rpx;
  width: 460rpx;
  color: #fff;
  border-radius: 50rpx;
  background: linear-gradient(90deg, #fc605b, #fb9360);
}

.shadow_box {
  box-sizing: border-box;
  padding: 60rpx 40rpx;

  .img_code {
    font-size: 28rpx;
    font-weight: bold;
  }
}

.phone-input {
  margin-bottom: 30rpx;
}

</style>
